<template>
  <span :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}' class='show-span'>
    <a-auto-complete v-if="isEdit" v-model="completeVal" :filter-option="filterOption" class='edit-input' 
      :data-source="getKey()" @change="handleChange" @blur='hideHandler'/>
    <template v-else>
      <a-auto-complete v-if="editAble || isAddData" ref='ref_input' v-model='completeVal' :placeholder='columnInfo.displayName'
        :filter-option="filterOption" :defaultOpen='!isAddData' :data-source="getKey()" @change="handleChange" @blur='hideHandler'/>
      <span v-else class='show-span' @click="showSel">{{getShowName()}}</span>
    </template>
  </span>
</template>
<script>
import { mapGetters } from 'vuex'
import mix from '../js/mainTable'
export default {
  mixins:[mix],
  data() {
    return {
      keyMap: new Map(),
      completeVal: ''
    }
  },
  computed: {
    ...mapGetters({
      editColumns: 'getEditColumns'
    }),
    isAddData() {
      return this.data.addNode != undefined && this.data.addNode 
        && this.editColumns.includes(this.columnInfo.dataIndex)
    }
  },
  methods: {
    //不区分大小写
    filterOption(input, option) {
      // console.log(input,option)
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
    getShowName() {
      if(this.columnInfo.editInfo != undefined && this.columnInfo.editInfo.length > 0) {
        const back = this.columnInfo.editInfo.find(item => item.value == this.inpValue)
        if(back != undefined)
          return back.label
      }
      return ''
    },
    getKey() {
      let temp = []
      this.columnInfo.editInfo.forEach(item => {
        if (!temp.includes(item.label)) {
          this.keyMap.set(item.label,item.value);
          temp.push(item.label)
        }
      })
      return temp
    },
    handleChange() {
      if (this.completeVal != this.getShowName() && this.keyMap.has(this.completeVal)) {
        this.$emit('update', this.keyMap.get(this.completeVal))
      }
    },
    hideHandler() {
      if (this.completeVal != this.getShowName())
        this.$emit('update', 0)
      else {
        this.init();
      }
      if(!this.isAddData) {
        this.editAble = false
      }
    },
    showSel() {
      if (this.isChild && this.data.actionPerssion && this.columnInfo.edit && this.statePermission && 
        (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
        this.editAble = true
        this.$nextTick(() => {
          this.$refs.ref_input.focus();
        })
      }
    },
    //初始化
    init() {
      this.completeVal = this.getShowName();
    },
    //数据改变后触发
    dataUpdate() {
      this.completeVal = this.getShowName();
    }
  }
}
</script>
<style scoped>
.edit-content {
    width: 100%;
}
.show-span {
    height: 100%;
    width: 100%;
    display: block;
    min-height: 21px;
}
.show-sel{
    width: 100%
}
.edit-input {
  width: 100%;
}
</style>